
<template xmlns="http://www.w3.org/1999/html">












  <div style="background-color:#ebeeea ;height: 2200px;">

    <div style="width: 60%;height: 2200px;margin-left: 20%;background-color:#ebeeea ">
      <el-header style="height:100px">
        <div style="width: 100%;height: 100% ">


          <div style="width: 20%; height:100%;float: left">
            <img src="../../assets/img/LOGO.png" style="width: 120px;height: 100px;margin-top: 2px">
          </div>


          <div style="width: 60%; height:100%;float: left">
            <div style="margin-top: 15px;width:60%;margin-left: 20%">
              <el-input placeholder="请输入内容" v-model="input5" class="input-with-select"  @keyup.enter.native="searchh">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                  <el-option label="项目" value="1"></el-option>
                  <el-option label="工作室" value="2"></el-option>
                </el-select>
                <!--<el-button type="primary" slot="append" icon="el-icon-search">搜索</el-button>-->
                <el-button slot="append" icon="el-icon-search" style="background-color: #409EFF" @click="searchh()" ></el-button>
              </el-input>
            </div>

          </div>



          <div style="width: 20%; height:100%;float: left">
            <!--<el-button type="warning" icon="el-icon-star-off" circle></el-button>-->
            <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" active-text-color="whitesmoke" :collapse="isCollapse" :menu-trigger="click" style="margin-right: 200px;margin-top: 15px">
              <el-submenu index="1" style="background-color: whitesmoke;width: 70px ;" circle>
                <template slot="title">
                  <el-button type="primary" icon="el-icon-star-off" circle></el-button>
                  <!--<i class="el-icon-location"></i>-->
                </template>

                <el-menu-item-group>

                  <el-menu-item index="1-2" @click="jump('Index')" >返回主页</el-menu-item>
                  <el-menu-item index="1-2" @click="Home()" >后台管理</el-menu-item>
                </el-menu-item-group>

                <!--<el-submenu index="1-4">-->
                <!--<span slot="title">注册工作室</span>-->
                <!--<el-menu-item index="1-4-1">我的</el-menu-item>-->
                <!--</el-submenu>-->
              </el-submenu>
            </el-menu>
          </div>
        </div>
      </el-header>

      <div style="height: 60px;margin-top: 20px">
        <p style="color: black;font-size: 23px;line-height: 23px;font-weight: bold;height: 40px;text-align: center">--  工作室详情  --</p>
      </div>

      <div style="height: 400px;width: 100%; background-color: white;margin-top: 30px">


        <div style="width: 50%;height: 400px;float: left;">
          <img :src="this.photoUrl" style="width: 500px;height: 400px;">
        </div>
        <div style="width: 50%;height: 300px;float: left">
          <div  style="width: 100%;height:300px" >
            <p  style="width: 400px;word-wrap: break-word;height: 50px;line-height: 20px;margin: 0px" >工作室名：   {{workroomName}}</p>
            <p  style="width: 400px;word-wrap: break-word;height: 50px;line-height: 20px;margin: 0px">工作室属性：  {{ lable}}</p>
            <p  style="width: 400px;word-wrap: break-word;height: 50px;line-height: 20px;margin: 0px">负责人：  {{namee}}</p>
            <p  style="width: 400px;word-wrap: break-word;height: 300px;line-height: 20px;margin: 0px" >    {{introduce}} <a :href=this.applyDocUrl ><p>点我下载工作室详细信息</p></a>    </p>
          </div>

          <!--<span v-if="this.ff" style="margin-top: 100px;margin-left: 10%">-->
            <!--<el-button  type="success" round @click="fang()" >邀请</el-button>-->
         <!--</span>-->
          <!--<p style="white-space: pre-wrap;">简介：{{introduce}}</p>-->
        </div>
      </div>


      <div style="width: 100%;margin-top: 70px">
        <div style="height: 60px">
          <p style="color: black;font-size: 23px;line-height: 23px;font-weight: bold;height: 40px;text-align: center">--  工作室成员  --</p>
        </div>
        <el-row style="margin-top:30px">
          <el-col :span="6" v-for="table in  tableData2" :key="o" :offset="index > 0 ? 0: 2">
            <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 30px">
              <div>
                <img :src="table. photoUrl" class="image" style="height: 300px">
                <div style="padding: 0px;border: 0px ;line-height: 60px"  >
                  <p style="line-height: 0px">名称： {{table.namee}}</p>
                  <p style="width:290px;height:100px;overflow: auto;line-height: 20px;word-wrap: break-word">介绍： {{table.introduce}}</p>

                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>


      </div>

      <div style="height: 60px">
        <p style="color: black;font-size: 23px;line-height: 23px;font-weight: bold;height: 40px;text-align: center">--  完成的项目展示  --</p>
      </div>

        <el-row style="margin-top:30px">
          <el-col :span="6" v-for="table in  tableData1" :key="o" :offset="index > 0 ? 2: 2">
            <el-card :body-style="{ padding: '0px' }" style="margin-bottom:30px ">
              <div>
                <img :src="table.photo" class="image" style="height: 300px">
                <div style="padding: 0px;border: 0px ;line-height: 60px"  >
                  <p style="line-height: 0px;word-wrap: break-word">项目名称： {{table.projectname}}</p>
                  <p style="line-height: 0px">项目属性： {{table.lable}}</p>
                  <p style="line-height: 0px">项目成交价： {{table.price}}</p>
                  <p style="line-height: 0px">项目用时： {{table.usetime}}</p>
                  <a :href=table.doc ><p>点此下载项目详细信息</p></a>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>


      </div>




    </div>





</template>

<script>
  export default {
    data() {
      return {
        isCollapse: true,
        ff:'',
        id:'',
        introduce:'',
        lable:'',
        namee:'',
        photoUrl:'',
        workroomName:'',
        applyDocUrl:'',
        tableData1: [
          { doc:'',
            introduction:'',
            lable:'',
            photo:'',
            price:'',
            projectname:'',
            usetime:'',
          }
        ],
        tableData2: [
          {introduce:'',
            namee:'',
            photoUrl:'',
          }
        ],
      }
    },
    mounted: function () {

        // setTimeout(() => {
        //   this._setSliderWidth()
        //   this._initDots()
        //   this._initSlider()
        //
        //   if (this.autoPlay) {
        //     this._play()
        //   }
        // }, 20)

      this.id= this.$route.query.mallCode
        axios.post('/user/workroomIndex',{
          id: this.id,
          wid: this.id
        }).then((response) => {
          if(response.data.states==800){
            this.$notify({
              title: '成功',
              message: '登录成功',
              type: 'success',
              duration:2000
            });

            var user= JSON.parse(window.sessionStorage.getItem("user"));
            var jj=user.role

            if(jj.includes("company")){
              this.ff=true

            }



            var e=response.data.user.workRoom
            var ee=response.data.user.finshProjects
            var eee=response.data.user.workroomMembers
          // this.ff=true
            this.id=e.id
            this.workroomName=e.workroomName
            this.lable=e.lable
            this.namee=e.namee
            this.introduce=e.introduce
            this.photoUrl=e.photoUrl
            this.applyDocUrl=e.applyDocUrl

            var data=[];
              for(var c=0;c<ee.length;c++){
                var w=ee[c];
                var obj={}
                  obj.doc=w.doc
                  obj.introduction=w.introduce
                  obj.lable=w.lable
                  obj.photo=w.photo
                  obj.price=w.price
                  obj.projectname=w.projectname
                  obj.usetime=w.usetime
                  data[c]=obj
              }
              this. tableData1=data


              var data1=[];
              for(var c1=0;c1<eee.length;c1++){
                var w1=eee[c1];
                var obj1={}
                obj1. namee=w1.namee
                obj1. introduce=w1.introduce
                obj1.photoUrl=w1.photoUrl
                data1[c1]=obj1
              }
              this. tableData2=data1
            console.log(this.tableData1)
            console.log(this.tableData2)
            }
          else{
            this.$notify.error({
              title: '错误',
              message: response.data.message,
              type: 'warning',
              duration:0
            });}

        }).catch((response)=>{
          this.$notify.error({
            title: '',
            message: '有信息为空'
          });
        })
      },


    methods: {

      fang(){

           var user= JSON.parse(window.sessionStorage.getItem("user"));
           var jj=user.id
           var hh =this.id

           axios.post('/company/projectInvate',{
             pid:hh,
             cid:jj
           }).then((response) => {

             if(response.data.states==800){
               console.log(response)
               this.$notify({
                 title: '成功',
                 message: '邀请成功',
                 type: 'success',
                 duration:2000
               });
               this.ff=false
               this.$router.replace('/Index')
             } else if(response.data.states==300){
               this.$notify.error({
                 title: '错误',
                 message: response.data.message,
                 type: 'warning',
                 duration:0
               });

             } else{
               this.$notify.error({
                 title: '错误',
                 message: '错误',
                 type: 'warning',
                 duration:0
               });
             }
           }).catch((response)=>{

           })
         },
      jump(path){
        this.$router.replace({path:path})

      },
      jumpp(path) {
        if(this.lable == "项目"){
          this.$router.push({
            path: '/Project',
            query: {
              mallCode: path,
            }
          })
        }
        if(this.lable == "工作室"){
          this.$router.push({
            path: '/Workroom',
            query: {
              mallCode: path,
            }
          })

        }

      },
      search(index){
        var e
        var w=1
        if(this.value4==true){
          e="项目"
        }else{
          e="工作室"
        }
        this.$router.push({
          path: '/Search',
          query: {
            mallCode: index,
            mallCode2: e,
            mallCode3:w
          }
        })

      },
      searchh(){
        var e
        var w=2
        if(this.select=="1"){
          e="项目"
        }else{
          e="工作室"
        }
        if(e==""){
          this.$notify({
            title: '警告',
            message: '请选择搜索类型',
            type: 'warning',
            duration:2000
          });
        }
        this.$router.push({
          path: '/Search',
          query: {

            mallCode: this.input5,
            mallCode2: e,
            mallCode3:w
          }
        })
        location.reload()

      },
      Home(){
        var user= JSON.parse(window.sessionStorage.getItem("user"));
        if(user==null||user==""){
          this.$router.replace('/Login')
        }else{
          var role=user.role
          console.log(role)

          if(role==="admin"){
            this.$router.replace('/AdminHome')
          }else{
            this.$router.replace('/Home')
          }}


      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },


    },






  }
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .button {
    padding: 0;
    float: right;
  }
  .image {
    width: 100%;
    display: block;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-header, .el-footer {
    background-color: whitesmoke;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;

    padding: 0px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  body > .el-container {
    margin-bottom: 10px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 100px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .button {
    padding: 0;
    float: right;
  }
  .image {
    width: 100%;
    display: block;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }


  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  body > .el-container {
    margin-bottom: 10px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {

  }

</style>
